<!-- 健康管理 > 免疫记录 -->
<template>
    <div>
        <!-- 筛选条件 -->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="企业名称" prop="companyId" v-if="companySelect">
                <el-select filterable clearable v-model="formInline.companyId">
                    <el-option v-for="item in companyNameList" :label="item.name" :value="item.id" :key="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="疫苗类型" prop="vaccineType">
                <el-select filterable clearable v-model="formInline.vaccineType">
                    <el-option v-for="item in vaccinationList" :label="item.name" :value="item.value" :key="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="选择日期">
                <el-date-picker
                    v-model="dateRange"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    value-format="YYYY-MM-DD"
                    @change="changeDate"
                    @clear="clearDate"
                />
            </el-form-item>
            <el-form-item>
                <el-button icon="Search" @click="getCowVaccinatioList">查询</el-button>
            </el-form-item>
        </el-form>

        <!-- 表格 -->
        <el-table :data="tableDate" stripe border style="width: 100%;">
            <el-table-column label="序号"  width="80px" type="index" />
            <el-table-column v-if="companyColumn" prop="companyName" label="企业名称" />
            <el-table-column prop="vaccinationDate" label="免疫日期" />
            <el-table-column prop="vaccineType" label="免疫类型" />
            <el-table-column prop="vaccineNames" label="疫苗名称">
                <template #default="scope">
                    <el-tag size="small" type="success" effect="dark" round style="margin-right: 5px;" v-for="(item, index) in scope.row.vaccineNames" :key="index">{{ item }}</el-tag>
                </template> 
            </el-table-column>
            <el-table-column label="免疫群体">
                <template #default="scope">
                    <div v-for="(item, index) in scope.row.groupCountList" :key="index" style="display: inline-block; margin-right: 10px;">
                        <span>{{ item.name }} : {{ item.count }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="enable" label="操作">
                <template #default="scope">
                    <el-button type="primary" icon="Tickets" size="small" @click="seeList(scope.row.id)">查看</el-button>
                    <el-button v-if="errorButton" type="info" icon="Warning" size="small" @click="abnormalHandler(scope.row.id)">数据异常</el-button>
                </template>
            </el-table-column>
        </el-table>
        <br/>
        <!-- 分页器 -->
        <el-pagination
            v-model:currentPage="pageNo"
            v-model:page-size="limit"
            :page-sizes="[15, 30, 50, 100]"
            :small="false"
            :background="true"
            layout="prev, pager, next, jumper, ->, sizes, total"
            :total="total"
            @current-change="getCowVaccinatioList"
            @size-change="sizeChange"
        />
        <!-- 查看列表弹窗 -->
        <checkList :isListShow="isListShow" :seeId="seeId" @closeSeeListDialog="closeSeeListDialog"></checkList>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { reqGetCowVaccinatioList, reqGetVaccinationList } from '@/api/healthManage'
import { reqGetCompanyNameList } from '@/api/company'
import { reqCowVaccinatioError } from '@/api/publicAbnormalInfo'
import { ElMessageBox, ElMessage } from 'element-plus'
import checkList from './checkList/index.vue'
// 引入用户相关小仓库
import useUserStore from '@/store/modules/user'
let userStore = useUserStore()
const companyColumn = userStore.componentConfig.companyColumn // 企业名称列-是否显示
const companySelect = userStore.componentConfig.companySelect // 企业下拉-是否显示
const addButton = userStore.componentConfig.addButton // 新增按钮-是否显示
const deleteButton = userStore.componentConfig.deleteButton // 删除按钮-是否显示
const editButton = userStore.componentConfig.editButton // 编辑按钮-是否显示
const errorButton = userStore.componentConfig.errorButton // 数据异常按钮-是否显示
const uploadButton = userStore.componentConfig.uploadButton // 导入按钮-是否显示

// 分页器当前页码
let pageNo = ref(1)
// 每一页展示多少条数据
let limit = ref(15)
// 数据总条数
let total = ref(0)

// 查看弹窗，显示隐藏
let isListShow = ref(false)
// 关闭弹窗
const closeSeeListDialog = (val) => {
    isListShow.value = val
}

// 表单收集
const formInline = reactive({
    companyId: '', // 企业id
    vaccineType: '', // 疫苗类型
    sortName: '',
    endDate: '', 
    sortName: '', // 排序字段名称
    sortType: '', // 排序类型：ascending-正序、descending-倒序、null 无
})

// 日期变化时触发
const dateRange = ref('') // 日期范围
const changeDate = (date) => {
    if(date){
        formInline.startDate = date[0]
        formInline.endDate = date[1]
    }
}
const clearDate = () => {
    dateRange.value = ''
    formInline.startDate = ''
    formInline.endDate = ''
}

// 获取企业下拉列表数据
let companyNameList = ref([])
const getCompanyNameList = async () => {
    let res = await reqGetCompanyNameList()
    companyNameList.value = res.data
}

// 获取疫苗类型下拉列表数据
let vaccinationList= ref([])
const getVaccinationList = async () => {
    let res = await reqGetVaccinationList()
    vaccinationList.value = res.data
    console.log('疫苗类型', res)
}

// 获取表格数据
let tableDate = ref([])
const getCowVaccinatioList = async () => {
    let res = await reqGetCowVaccinatioList(Object.assign(formInline, {
        pageNumber: pageNo.value, // 页号
        pageSize: limit.value, // 每页数量
    }))
    tableDate.value = res.data.records
    total.value = res.data.totalRow
    console.log('免疫记录liebiao', res)
}

// 分页的下拉菜单发生改变时触发
const sizeChange = () => {
    pageNo.value = 1
    getCowVaccinatioList()
}

// 查看列表按钮
let seeId = ref(null)
const seeList = (id) => {
    seeId.value = id
    isListShow.value = true
}

// 异常按钮
const abnormalHandler = (id) => {
    ElMessageBox.prompt('请输入异常原因', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: false,
        inputPattern: /^.+$/,
        inputErrorMessage: '请填写异常原因'
    }).then(async (res) => {
        // console.log('异常原因为：', res.value)
        let result = await reqCowVaccinatioError({
            id: id,
            auditMemo: res.value, // 异常信息
            status: -1
        })
        if(result.status == 200){
            ElMessage({
                type: 'success',
                message: result.msg
            })
        }
    }).catch(() => {
            console.log('取消填写异常原因')
    })
}

// 组件挂载完毕
onMounted(() => {
    getCompanyNameList()
    getCowVaccinatioList()
    getVaccinationList()
})
</script>

<style scoped lang="scss">
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>